<template>
  <div>
    <section class="w">
      <h1 class="title">教 / 师 / 风 / 采</h1>
      <div class="wrap">
        <div class="item" v-for="(item, index) in teacherList" :key="index">
          <img class="image" :src="item.src" />
          <div>
            <span class="label">"{{ item.label }}"</span> ——
            <span class="name">{{ item.name }}</span>
          </div>
        </div>
      </div>
    </section>
    <section class="w">
      <h1 class="title">优 / 秀 / 学 / 生</h1>
      <div class="wrap">
        <div class="item" v-for="(item, index) in studentList" :key="index">
          <img class="image" :src="item.src" />
          <div>
            <span class="label">"{{ item.label }}"</span> ——
            <span class="name">{{ item.name }}</span>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: 'LeaderBoard',
  data() {
    return {
      // 教师风采数据
      teacherList: [
        { src: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg", label: "课程育人", name: "蒋喆" },
        { src: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg", label: "课程育人", name: "马莉" },
        { src: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg", label: "服务育人", name: "黄月华" },
        { src: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg", label: "实践育人", name: "陈艳" }
      ],
      // 优秀学生数据
      studentList: [
        { src: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg", label: "优秀学生", name: "小明" },
        { src: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg", label: "优秀学生", name: "小红" },
        { src: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg", label: "优秀学生", name: "小李" },
        { src: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg", label: "优秀学生", name: "张三" }
      ]
    }
  },
}
</script>

<style scoped>


.title {
  text-align: center;
}
.wrap {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.wrap .item {
  width: 20%;
  height: 320px;
}

.wrap .item .image {
  width: 100%;
  height: 85%;
}

.wrap .item div {
  height: 40px;
  width: 100%;
  text-align: center;
  line-height: 40px;
}
</style>